<template>
    <section class="shishi_from">
    		<el-form ref="form" :model="shishiFrom" label-width="106px" class="second_form">
		    			<el-form-item label="输入参数" style="margin-bottom: 0;"></el-form-item>
							
				<el-form-item label="输出参数(可多选)" required >
					<el-checkbox-group v-model="shishiFrom.outputData" @change="dealOutPut">
				     	<el-checkbox-button class="box_checkbox" v-for="(item,index) in outputData" :label="item.name" :key="item.key">{{item.name}}</el-checkbox-button>
					</el-checkbox-group>
				</el-form-item>
				
				 
				<el-form-item label="敏感词脱敏" >
					<div v-for="(item,index) in tuominArray" style="margin-bottom: 15px;" >
						
						<!--<el-select v-model="item.outputDataFormId " placeholder="请选择" style="width: 20%;">
						      <el-option :value="tuominNameitem" v-for="(tuominNameitem,tuominNameindex) in shishiFrom.outputData">{{tuominNameitem}}</el-option>
						 </el-select>-->
						 
						  <el-input :disabled="true"  v-model="item.outputDataFormId" style="width: 20%;" ></el-input>
						 
						 <el-select v-model="item.position" placeholder="请选择" style="width: 20%;">
						      <el-option label="前面" value="1"></el-option>
						      <el-option label="后面" value="2"></el-option>
						      <el-option label="中间" value="3"></el-option>
						      <el-option label="全部" value="4"></el-option>
						 </el-select>
						 
						 <el-input v-model="item.length" style="width: 20%;" :maxlength=10></el-input>位
						 
						  <el-select v-model="item.replaceStr" placeholder="请选择脱敏规则" style="width: 20%;">
						  	  <el-option label="用星号替代" value="*"></el-option>
						 </el-select>
						 
					</div>
					
				</el-form-item>
        	</el-form>
        	
    </section>
</template>

<script>
    
    export default {
    	props:{
    		outputData:Array,
    		timeSubmit:Boolean,
    		upDataForm:{
    			type:Array,
    			default:function(){
    				return []
    			}
    		},
    	},
        data() {
          return {
          	tuominArray:[/*脱敏的表单*/
	          	
          	],
          	shishiFrom:{
          		checkRule:'',
          		ishas:'',
          		canshuName:'',
          		outputData:[],
          	},
          	shishiFromCheckRuleOptions:[/**/
          				{
          					label:'姓名',
          					value:'xingming',
          				},
          				{
          					label:'年龄',
          					value:'year',
          				}
          	],
          	shishiFromTable1Data:[
          		{
          			checkRule:'',
	          		ishas:'',
	          		canshuName:'',
          		},
          		{
          			checkRule:'',
	          		ishas:'',
	          		canshuName:'',
          		}
          	],
          
          };
        },
        methods: {
        	dealOutPut(val){
//      		console.log(val);
        		if(this.tuominArray.length===val.length-1){
        			this.tuominArray.push(
        				{
			          		outputDataFormId :val[val.length-1],
			          		position:'',
			          		length:'',
			          		replaceStr:""
			          	}
        			)
        		}else if(this.tuominArray.length===val.length+1){
        			this.tuominArray.splice(-1,1)
        		}
        		
//      		console.log(this.shishiFrom.outputData)
        	},
        	dealOutputDataFormId(val){
        		console.log(val);
        		console.log(this.outputData)
        		let id='s';
        		for(let v in this.outputData){
        			if(this.outputData[v].name===val){
        				id = this.outputData[v].id;
        				break;
        			}
        		}
        		return id;
        	}
        },
        watch:{
        	timeSubmit(newVal){
        		console.log(this.tuominArray);
        		if(this.upDataForm.length!=0){
        			for(let i in this.upDataForm){
        				for(let v in this.outputData){
        							if(this.outputData[v].id==this.upDataForm[i].outputDataFormId){
        								this.upDataForm[i].outputDataFormId = this.outputData[v].name
        								break;
        							}
        				}
        			}
        			this.tuominArray =this.upDataForm;
        		}
        		
        		for(let i in this.tuominArray){
        			this.tuominArray[i].outputDataFormId = this.dealOutputDataFormId(this.tuominArray[i].outputDataFormId);
        		}
        		this.$emit("outPutForm",this.tuominArray);
        		
        	},
        	upDataForm:{
        		    handler(newVal, oldVal){
//							if(this.outputData.length!=0){
//								for(let i in newVal){
//	        						for(let v in this.outputData){
//	        							if(this.outputData[v].id==newVal[i].outputDataFormId){
//	        								newVal[i].outputDataFormId = this.outputData[v].name
//	        								break;
//	        							}
//	        						}
//	        					}
//	        					this.tuominArray =newVal;
//							}
							this.tuominArray =newVal;
            	},
            	deep:true
        	},
//      	outputData:{
//      		handler(newVal, oldVal){
//      			if(this.upDataForm.length!=0){
//      				for(let i in this.upDataForm){
//	        						for(let v in newVal){
//	        							if(newVal[v].id==this.upDataForm[i].outputDataFormId){
//	        								this.upDataForm[i].outputDataFormId = newVal[v].name
//	        								this.upDataForm[i].position =String(this.upDataForm[i].position)
//	        								break;
//	        							}
//	        						}
//	        					}
//	        			this.tuominArray =this.upDataForm;
//      			}
//      		},
//      		deep:true
//      	}
        },
        mounted(){
        	Object.assign(this.$data, this.$options.data())/*重置data数据*/
//      	if(this.upDataForm.length!=0){
//      		console.log(this.upDataForm);
//      				for(let i in this.upDataForm){
//      						for(let v in this.outputData){
//      							if(this.outputData[v].id==this.upDataForm[i].outputDataFormId){
//      								this.upDataForm[i].outputDataFormId = this.outputData[v].name
//      								break;
//      							}
//      						}
//      					}
//      		this.tuominArray = this.upDataForm
//      		
//      	}
        }
  };
</script>

<style>
    .shishi_from  .box_checkbox{
    	margin: 5px !important;
    }
    .shishi_from .box_checkbox .el-checkbox-button__inner{
    	border:  1px solid #dcdfe6;
    }
    
   .shishi_from .el-checkbox-button.is-checked .el-checkbox-button__inner{
	   	color: #fff;
	    background-color: #409eff;
	    border-color: #409eff;
	    box-shadow: -1px 0 0 0 #8cc5ff;
   }
   .shishi_from  .add_button{
    	margin-top: 15px;
    }
</style>